<template>
  <div>
    <!--        {{ subject_id }}{{ subject_name }}&#45;&#45;{{ activeCourse }}-->
    <!--        {{recentVideoList}}-->
    <div
        v-if="
        recentVideoList && recentVideoList.rows && recentVideoList.rows.length
      "
    >
      <div
          style="display: flex; padding: 10px 0px"
          v-for="(item, index) in recentVideoList.rows"
          :key="index"
      >
        <img width="160" :src="item.coverURL" alt=""/>
        <div
            style="
            display: flex;
            flex-direction: column;
            width: 100%;
            margin-left: 20px;
            border-bottom: 1px solid gray;
          "
        >
          <p class="course_title">{{ item.name }}</p>
          <p class="course_time">
            <span style="margin-right: 20px"
            >已学：{{
                proxy.$filters.timeFormat(Number.parseInt(item.location ? item.location : 0))
              }}</span
            >
            <span>总时长：{{ proxy.$filters.timeFormat(item.duration) }}</span>
          </p>
          <p class="course_ing">
            最后观看时间：{{ proxy.$filters.dateTimeFormat2(item.lastTime) }}
          </p>
        </div>
        <div
            style="
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            border-bottom: 1px solid gray;
          "
        >
          <el-button style="margin-bottom: 20px" @click="toVideo(item)"
          >继续学习
          </el-button
          >
        </div>
      </div>
    </div>
    <el-empty v-else description="暂无数据"/>
    <div v-if="recentVideoList.pagination" style="margin-top: 20px">
      <el-pagination
          background
          v-model:currentPage="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="recentVideoList.pagination.count"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import {recentVideoList} from "@/api/api";
import {reactive, toRefs, getCurrentInstance, watch} from "vue";
import {useRouter} from "vue-router";

export default {
  name: "index",
  props: {
    subject_id: {
      type: Number,
    },
    subject_name: {
      type: String,
    },
    activeCourse: {
      type: String,
    },
  },
  setup(props) {
    let data = reactive({
      recentVideoList: [],
      pageSize: 5,
      currentPage: 1,
    });

    let router = useRouter();
    const {proxy} = getCurrentInstance();
    let getRecentVideoList = () => {
      recentVideoList({
        courseID: localStorage.getItem("activeCourse"),
        page: data.currentPage,
        pageSize: data.pageSize,
      }).then((res) => {
        console.log("最近在学视频列表", res);
        data.recentVideoList = res.data;
      });
    };
    getRecentVideoList();

    watch(
        () => props.activeCourse,
        () => {
          getRecentVideoList();
        }
    );

    const handleSizeChange = (val) => {
      console.log(`${val} items per page`);
      data.pageSize = val;
      getRecentVideoList();
    };
    const handleCurrentChange = (val) => {
      console.log(`current page: ${val}`);
      data.currentPage = val;
      getRecentVideoList();
    };

    let toVideo = (item) => {
      console.log(item);
      router.push({
        name: "VideoPlayer",
        params: {
          subject_id: localStorage.getItem("activeCourse"),
          subject_name: localStorage.getItem("activeCourseName"),
          id: item.id,
          chapterID: item.subjectID,
        },
      });
    };
    return {
      proxy,
      toVideo,
      handleSizeChange,
      handleCurrentChange,
      ...toRefs(data),
    };
  },
};
</script>

<style scoped>
.course_title {
  font-weight: bold;
  font-size: 16px;
}

.course_time {
  padding: 5px 0;
  font-size: 12px;
  color: rgb(141, 130, 130);
}

.course_ing {
  font-size: 14px;
  padding: 15px 0;
}
</style>
